TripleBarChart.vue
<template>
  <div>
    <!-- 开通人数图表 -->
    <div ref="openChartRef" :style="{ width: '100%', height: '300px' }"></div>
    
    <!-- 使用人数图表 -->
    <div ref="useChartRef" :style="{ width: '100%', height: '300px' }"></div>
    
    <!-- 授信额度图表 -->
    <div ref="creditChartRef" :style="{ width: '100%', height: '300px' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    openData: {
      type: Array,
      required: true
    },
    useData: {
      type: Array,
      required: true
    },
    creditData: {
      type: Array,
      required: true
    },
    categories: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      openChart: null,
      useChart: null,
      creditChart: null
    };
  },
  watch: {
    openData: {
      handler() {
        this.updateChart('open');
      },
      deep: true
    },
    useData: {
      handler() {
        this.updateChart('use');
      },
      deep: true
    },
    creditData: {
      handler() {
        this.updateChart('credit');
      },
      deep: true
    }
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    [this.openChart, this.useChart, this.creditChart].forEach(chart => {
      if (chart) chart.dispose();
    });
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initCharts() {
      this.openChart = echarts.init(this.$refs.openChartRef);
      this.useChart = echarts.init(this.$refs.useChartRef);
      this.creditChart = echarts.init(this.$refs.creditChartRef);
      
      this.updateAllCharts();
    },
    updateAllCharts() {
      this.updateChart('open');
      this.updateChart('use');
      this.updateChart('credit');
    },
    updateChart(type) {
      const chartMap = {
        open: this.openChart,
        use: this.useChart,
        credit: this.creditChart
      };
      
      const titleMap = {
        open: '周开通人数',
        use: '周使用人数',
        credit: '周授信额度'
      };
      
      const colorMap = {
        open: '#5470c6',
        use: '#91cc75',
        credit: '#fac858'
      };
      
      const dataMap = {
        open: this.openData,
        use: this.useData,
        credit: this.creditData
      };
      
      const chart = chartMap[type];
      if (!chart) return;
      
      const option = {
        title: {
          text: titleMap[type],
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            return params[0].name + '<br/>' + 
                   params[0].seriesName + ': ' + 
                   params[0].value.toLocaleString();
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.categories,
          axisLabel: {
            interval: 0,
            rotate: 30,
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: type === 'credit' ? '金额' : '人数',
          axisLabel: {
            formatter: function(value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1) + '万';
              }
              return value;
            }
          }
        },
        series: [
          {
            name: titleMap[type],
            type: 'bar',
            data: dataMap[type],
            itemStyle: {
              color: colorMap[type]
            },
            label: {
              show: true,
              position: 'top',
              formatter: function(params) {
                if (params.value >= 10000) {
                  return (params.value / 10000).toFixed(1) + '万';
                }
                return params.value;
              }
            }
          }
        ]
      };
      
      chart.setOption(option);
      chart.resize();
    },
    handleResize() {
      [this.openChart, this.useChart, this.creditChart].forEach(chart => {
        if (chart) chart.resize();
      });
    }
  }
};
</script>